<template>
	<view class="content">
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="../../static/img/dc-点餐.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="inputWrapper">
				<input class="input" type="text" placeholder="请输入用户名" />
			</view>
			<view class="inputWrapper">
				<input class="input" type="text" placeholder="请输入密码" />
			</view>
			<view class="loginBtn" @click="loginClick()">
				<navigator class="confirm" url="../index/index" open-type="switchTab" hover-class="other-navigator-hover">
					<text>登录</text>
				</navigator>
			</view>
			<view class="goBtn">
				<text>找回密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			loginClick() {
				uni.navigateTo({
					url: '../index/index'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.avatorWrapper {
			height: 30vh;
			width: 100vw;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}

		.avator {
			width: 200upx;
			height: 200upx;
			overflow: hidden;

			.img {
				width: 100%;
				border-radius: 20rpx;
			}
		}


		.form {
			padding: 0 100rpx;
			margin-top: 80px;

		}

		.inputWrapper {
			width: 100%;
			height: 80upx;
			background: white;
			border-radius: 20px;
			box-sizing: border-box;
			padding: 0 20px;
			margin-top: 20px;

			input {
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 15px;
			}
		}

		.loginBtn {
			width: 100%;
			height: 80upx;
			background: $shop-color;
			border-radius: 50upx;
			margin-top: 50px;
			display: flex;
			justify-content: center;
			align-items: center;

		}


		.goBtn {
			margin: 20rpx;
			font-size: 35rpx;
			text-align: center;
		}
	}
</style>
